<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        #title {
            line-height: 40px;
        }

        .list li {
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">DOM操作</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // DOM操作 => 对DOM操作进行封装 => 可以快捷获取元素 操作元素改变内容 样式 属性 绑定事件 


    // 面向过程 => 一般流程下操作元素的步骤
    // 1. 获取元素
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // document.querySelector()
    // document.querySelectorAll()

    // 2. 通过获取的元素 操作元素的内容(innerHTML/innerText/value)  样式(ele.style)  属性(属性节点:ele.setAttribute()  元素节点的属性:ele.className) 绑定事件(ele.addEventListener)

    // 字面量对象
    // var getEle = {
    //     list: document.querySelectorAll(".list li"),
    //     setHtml: function (con) {
    //         for (var i = 0; i < this.list.length; i++) {
    //             var ele = this.list[i];
    //             ele.innerHTML = con;
    //         }
    //     },
    //     getHtml: function () {
    //         return this.list[0].innerHTML;
    //     }
    // }

    // var getEle = {
    //     list: document.querySelectorAll("#title"),
    //     setHtml: function (con) {
    //         for (var i = 0; i < this.list.length; i++) {
    //             var ele = this.list[i];
    //             ele.innerHTML = con;
    //         }
    //     },
    //     getHtml: function () {
    //         return this.list[0].innerHTML;
    //     }
    // }

    // getEle.setHtml();
    // getEle.getHtml();



    /* function getEle(selector) {
        var obj = {
            list: document.querySelectorAll(selector),
            setHtml: function (con) {
                for (var i = 0; i < this.list.length; i++) {
                    var ele = this.list[i];
                    ele.innerHTML = con;
                }
            },
            getHtml: function () {
                return this.list[0].innerHTML;
            }
        }
        return obj;
    } */


    /* function GetEle(selector) {
        // {}
        // {}[[Prototype]] = GetEle.prototype;
        // this -> {}

        this.list = document.querySelectorAll(selector);

        // return this;   // {list:[ele,ele,ele,ele]}
    }


    GetEle.prototype.setHtml = function (con) {
        // this.list => 获取实例化对象中的元素集合
        for (var i = 0; i < this.list.length; i++) {
            var ele = this.list[i];
            ele.innerHTML = con;
        }
    }
    GetEle.prototype.getHtml = function () {
        return this.list[0].innerHTML;
    }

    debugger;
    var $liList = new GetEle(".list li");
    console.log($liList); */


</script>
<script>

    function GetEle(selector) {
        // {}
        // {}[[Prototype]] = GetEle.prototype;
        // this -> {}
        var list = document.querySelectorAll(selector); // 伪数组

        list = Array.from(list); //先转为真数组  => 赋值原值
        Object.setPrototypeOf(list, GetEle.prototype); // 在修改真数组的原型属性([[Prototype]])

        return list; // [ele,ele,ele,ele]  构造函数返回自定义实例化对象(伪数组)
    }

    // GetEle.prototype = {constructor:GetEle}
    GetEle.prototype.setHtml = function (con) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        for (var i = 0; i < this.length; i++) {
            var ele = this[i];
            ele.innerHTML = con;
        }
    }
    GetEle.prototype.getHtml = function () {
        return this[0].innerHTML;
    }

    var $liList = new GetEle(".list li"); // [li,li,li,li,li,li]
    console.log($liList);

    $liList.setHtml("123123");

</script>

</html>